<template>
  <div class="test-container">
    <div class="markdown-editor-container">
      <div class="editor-header">
        <div class="header-top">
          <div class="title-section">
            <template v-if="isEditing">
              <div class="edit-header">
                <div class="input-group">
                  <span class="input-label">标题</span>
                  <el-input
                    v-model="title"
                    placeholder="请输入卡片标题"
                    class="title-input"
                    @input="handleTitleChange"
                  />
                </div>
                <div class="input-group" v-if="props.cardData?.id">
                  <span class="input-label">所属卡片库</span>
                  <el-tree-select
                    v-model="selectedCategoryId"
                    :data="categoryList"
                    :props="defaultProps"
                    placeholder="请选择卡片库"
                    class="category-select"
                    check-strictly
                    :render-after-expand="false"
                  >
                    <template #default="{ node, data }">
                      <div class="custom-tree-select-node">
                        <span class="node-title">{{ node.label }}</span>
                        <span class="node-path" v-if="data.parentPath">{{ data.parentPath }}</span>
                      </div>
                    </template>
                  </el-tree-select>
                </div>
              </div>
            </template>
            <template v-else>
              <h2 class="text-xl font-semibold">{{ title || '未命名卡片' }}</h2>
            </template>
          </div>
          <div class="action-buttons">
            <el-button 
              @click="$emit('back')"
              class="action-button"
            >
              <el-icon class="el-icon">
                <Back />
              </el-icon>
              返回
            </el-button>
            <el-button 
              type="primary" 
              @click="toggleEditMode"
              class="action-button"
            >
              <el-icon class="el-icon">
                <component :is="isEditing ? Check : Edit" />
              </el-icon>
              {{ isEditing ? '保存' : '编辑' }}
            </el-button>
            <el-button 
              type="success" 
              @click="handleJiwei"
              class="action-button jiwei-button"
            >
              <el-icon class="el-icon">
                <Medal />
              </el-icon>
              积微
              <span class="jiwei-count" v-if="jiweiCount > 0 && !isMobile">({{ jiweiCount }})</span>
            </el-button>
          </div>
        </div>
        <div class="navigation-buttons" v-if="!isEditing && cardList.length > 1">
          <el-button 
            @click="goToPrevious"
            class="action-button"
            :disabled="!hasPrevious"
          >
            <el-icon class="el-icon">
              <ArrowLeft />
            </el-icon>
            上一页
          </el-button>
          <div class="page-info">
            <span class="current-page">{{ currentIndex + 1 }}</span>
            <span class="separator">/</span>
            <span class="total-pages">{{ totalCards }}</span>
          </div>
          <el-button 
            @click="goToNext"
            class="action-button"
            :disabled="!hasNext"
          >
            <el-icon class="el-icon">
              <ArrowRight />
            </el-icon>
            下一页
          </el-button>
        </div>
      </div>

      <div v-if="isEditing" class="editor-wrapper">
        <md-editor 
          ref="editorRef"
          v-model="content" 
          :toolbars="toolbars"
          :prettier="true"
          @save="saveContent"
          class="markdown-editor"
        >
          <template #defToolbars>
            <Mark>
              <!-- <template #trigger>mark</template> -->
              <template #trigger>
                <el-icon><Brush /></el-icon>
              </template>
            </Mark>
          </template>
        </md-editor>
      </div>
      <div v-else class="preview-wrapper">
        <md-preview :modelValue="content" class="markdown-preview" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch, onUnmounted } from 'vue'
import { MdEditor, MdPreview, config } from 'md-editor-v3'
import { Mark } from '@vavt/v3-extension'
import MarkExtension from 'markdown-it-mark'
import { saveArticle, clock, getCategoryList , getArticleList } from '@/api/article'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowRight, Edit, Check, Back, Medal, RefreshRight,Brush } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import 'md-editor-v3/lib/preview.css'
import 'md-editor-v3/lib/style.css'
import '@vavt/v3-extension/lib/asset/Mark.css'
import emitter from '@/utils/eventBus'


const props = defineProps({
  cardData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['save', 'back', 'update'])

const content = ref('')
const title = ref('')
const isEditing = ref(false)
const currentIndex = ref(0)
const cardList = ref([])
const editorRef = ref(null)
const jiweiCount = ref(0)
const categoryList = ref([])
const selectedCategoryId = ref(null)
const visitedCards = ref(null)

// 计算属性
const totalCards = ref(0)
const hasPrevious = computed(() => currentIndex.value > 0)
const hasNext = computed(() => currentIndex.value < cardList.value.length - 1)

const defaultProps = {
  children: 'children',
  label: 'title',
  value: 'id'
}

// 添加移动端检测
const isMobile = ref(window.innerWidth <= 768)

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})

// 添加重试函数
const retry = async (fn, retries = 3, delay = 1000) => {
  try {
    return await fn()
  } catch (error) {
    if (retries === 0) throw error
    await new Promise(resolve => setTimeout(resolve, delay))
    return retry(fn, retries - 1, delay)
  }
}

onMounted(async () => {
  try {
    await nextTick()
    if (props.cardData) {
      content.value = props.cardData.content || ''
      title.value = props.cardData.title || ''
      cardList.value = props.cardData.cardList || []
      currentIndex.value = props.cardData.currentIndex || 0
      jiweiCount.value = props.cardData.readNum || 0
      selectedCategoryId.value = props.cardData.categoryId
      totalCards.value = props.cardData.totalCount
    }
    // 如果是新建卡片，直接进入编辑模式
    if (!props.cardData?.title) {
      isEditing.value = true
      // 等待编辑器组件挂载完成
      await nextTick()
      // 触发不预览
      if (editorRef.value) {
        editorRef.value.togglePreview(false)
      }
    }
    // 获取卡片库列表
    try {
      await Promise.all([
        retry(fetchCategoryList),
        retry(fetchArticleList)
      ])
    } catch (error) {
      console.error('初始化数据失败:', error)
      ElMessage.error('加载数据失败，请刷新页面重试')
    }
  } catch (error) {
    console.error('组件初始化失败:', error)
    ElMessage.error('初始化失败，请刷新页面重试')
  }
})

// 获取卡片库列表
const fetchArticleList = async () => {
  try {
    const queryParams = {
      pageNum: 1,
      pageSize: 1000,
      categoryId: props.cardData.categoryId,
    }
    const response = await getArticleList(queryParams)
    if (response.data.success) {
      const newItems = response.data.data.records.map(item => ({
        id: item.id,
        text: item.content,
        title: item.title,
        categoryId: item.categoryId,
        readNum: item.readNum
      }))
      cardList.value = newItems
    }
  } catch (error) {
    console.error('获取卡片库列表失败:', error)
    throw error // 向上传递错误，让重试机制处理
  }
}

// 获取卡片库列表
const fetchCategoryList = async () => {
  try {
    const response = await getCategoryList()
    if (response.status === 200 && response.data?.data) {
      // 转换数据为树形结构
      categoryList.value = processTreeData(response.data.data)
    }
  } catch (error) {
    console.error('获取卡片库列表失败:', error)
    throw error // 向上传递错误，让重试机制处理
  }
}

// 处理树形数据
const processTreeData = (data, parentPath = '') => {
  return data.map(item => {
    const currentPath = parentPath ? `${parentPath} / ${item.name}` : item.name
    return {
      id: item.id,
      title: item.name,
      parentPath: parentPath,
      children: item.children ? processTreeData(item.children, currentPath) : []
    }
  })
}

// 配置 markdown-it 插件
config({
  markdownItConfig(md) {
    md.use(MarkExtension)
  }
})

// 自定义工具栏配置
const toolbars = [
  'bold',
  'underline',
  'italic',
  'strikethrough',
  '-',
  'title',
  'quote',
  'unordered-list',
  'ordered-list',
  'preview',
  0,
  '-',
  'code-row',
  'code',
  'link',
  'image',
  'table',
  '-',
  'fullscreen',
  'page-break',
  '-',
  'help'
]

const toggleEditMode = async () => {
  if (isEditing.value) {
    await saveContent()
  } else {
    isEditing.value = true
    // 等待编辑器组件挂载完成
    await nextTick()
    // 触发不预览
    if (editorRef.value) {
      editorRef.value.togglePreview(false)
    }
  }
  await nextTick()
}

const handleTitleChange = (value) => {
  title.value = value
}

const saveContent = async () => {
  try {
    const saveData = {
      title: title.value || '未命名卡片',
      content: content.value,
      categoryId: props.cardData?.id ? selectedCategoryId.value : props.cardData?.categoryId
    }

    // 如果是编辑现有卡片，添加 id
    if (props.cardData?.id) {
      saveData.id = props.cardData.id
    }

    const response = await saveArticle(saveData)
    if (response.data.success) {
      ElMessage.success('保存成功')
      // 保存成功后更新当前卡片数据
      const updatedCard = {
        title: saveData.title,
        content: saveData.content,
        id: response.data.data?.id || props.cardData?.id,
        categoryId: saveData.categoryId,
        readNum: jiweiCount.value
      }
      
      // 如果是新建卡片，添加到卡片列表并更新页码
      if (!props.cardData?.id) {
        cardList.value.push({
          ...updatedCard,
          text: saveData.content
        })
        currentIndex.value = cardList.value.length - 1
        totalCards.value = currentIndex.value+1
        // 更新 props.cardData.id
        props.cardData.id = response.data.data?.id
      } else {
        // 更新当前卡片列表中的数据
        if (currentIndex.value >= 0 && currentIndex.value < cardList.value.length) {
          cardList.value[currentIndex.value] = {
            ...cardList.value[currentIndex.value],
            title: saveData.title,
            text: saveData.content,
            readNum: jiweiCount.value,
            categoryId: saveData.categoryId
          }
        }
      }
      
      emit('update', updatedCard)
      isEditing.value = false
      await nextTick()
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

// 修改导航方法
const goToPrevious = async () => {
  if (hasPrevious.value) {
    currentIndex.value--
    const currentCard = cardList.value[currentIndex.value]
    content.value = currentCard.text || ''
    title.value = currentCard.title || ''
    jiweiCount.value = currentCard.readNum || 0
    // 更新 props.cardData.id
    props.cardData.id = currentCard.id
    await nextTick()
  }
}

const goToNext = async () => {
  if (hasNext.value) {
    currentIndex.value++
    const currentCard = cardList.value[currentIndex.value]
    content.value = currentCard.text || ''
    title.value = currentCard.title || ''
    jiweiCount.value = currentCard.readNum || 0
    // 更新 props.cardData.id
    props.cardData.id = currentCard.id
    await nextTick()
  }
}

const handleJiwei = async () => {
  try {
    const currentCard = cardList.value[currentIndex.value]
    if (!currentCard?.id) {
      ElMessage.warning('请先保存卡片后再进行积微')
      return
    }
    console.log('currentCard.id:', currentCard.id)
    const response = await clock(currentCard.id)
    if (response.data.success) {
      const readNumVo = response.data.data
      jiweiCount.value = readNumVo.readNum
      // 更新当前卡片列表中的数据
      if (currentIndex.value >= 0 && currentIndex.value < cardList.value.length) {
        cardList.value[currentIndex.value] = {
          ...cardList.value[currentIndex.value],
          readNum: readNumVo.readNum
        }
      }
      if(readNumVo.reward === "很遗憾没有获得积分"){
        ElMessage.warning(readNumVo.reward)
      }else{
        ElMessage({
          type: 'success',
          message: readNumVo.reward,
          duration: 1500
        })
      }
      // 在数据更新后触发刷新header事件
      emitter.emit('refreshHeader')

      // 如果有多张卡片，跳转到下一张卡片
      if (cardList.value.length > 1) {
        // 如果还没有访问记录，初始化访问记录
        if (!visitedCards.value) {
          visitedCards.value = new Set()
        }
        
        // 如果所有卡片都已访问过，清空访问记录
        if (visitedCards.value.size >= cardList.value.length) {
          visitedCards.value.clear()
        }
        
        // 过滤出未访问的卡片
        const unvisitedCards = cardList.value.filter((_, index) => !visitedCards.value.has(index))
        
        // 计算权重：复习次数越少，权重越高
        const weightedCards = unvisitedCards.map(card => {
          const readNum = card.readNum || 0
          // 使用指数衰减函数计算权重，复习次数越少权重越高
          const weight = Math.exp(-readNum * 0.5)
          return { card, weight }
        })
        
        // 计算总权重
        const totalWeight = weightedCards.reduce((sum, { weight }) => sum + weight, 0)
        
        // 生成随机数
        let random = Math.random() * totalWeight
        let selectedCard = null
        
        // 根据权重选择卡片
        for (const { card, weight } of weightedCards) {
          random -= weight
          if (random <= 0) {
            selectedCard = card
            break
          }
        }
        
        // 如果因为浮点数精度问题没有选中卡片，选择第一张
        if (!selectedCard) {
          selectedCard = unvisitedCards[0]
        }
        
        // 找到选中卡片的索引
        const nextIndex = cardList.value.findIndex(card => card === selectedCard)
        currentIndex.value = nextIndex
        
        // 记录已访问的卡片
        visitedCards.value.add(nextIndex)
        
        const nextCard = cardList.value[currentIndex.value]
        content.value = nextCard.text || ''
        title.value = nextCard.title || ''
        jiweiCount.value = nextCard.readNum || 0
        // 更新 props.cardData.id
        props.cardData.id = nextCard.id
        await nextTick()
      }
    } else {
      ElMessage.error(response.data.message || '积微失败')
    }
  } catch (error) {
    console.error('积微失败:', error)
    ElMessage.error('积微失败，请稍后重试')
  }
}

</script>

<style scoped>
.test-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

@media (max-width: 768px) {
  .test-container {
    padding: 12px;
  }
}

.markdown-editor-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .markdown-editor-container {
    padding: 16px;
    border-radius: 8px;
  }
}

.editor-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  flex: 1;
  margin-right: 24px;
  position: relative;
}

.title-input {
  width: 100%;
}

.title-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
}

.title-input :deep(.el-input__inner) {
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
  color: #1a1a1a;
}

.title-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 1px #409EFF !important;
}

.title-input :deep(.el-input__inner)::placeholder {
  color: #909399;
  opacity: 0.7;
}

h2.text-xl {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  padding: 8px 0;
  position: relative;
  display: inline-block;
}

h2.text-xl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, transparent);
  opacity: 0.5;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.navigation-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 16px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 32px;
  line-height: 1;
}

.action-button:hover:not(.is-disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-button .el-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
}

.action-button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.page-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.current-page {
  color: #409EFF;
  font-size: 1.1em;
}

.separator {
  color: #dcdfe6;
}

.total-pages {
  color: #909399;
}

@media (max-width: 768px) {
  .editor-header {
    padding: 16px;
    gap: 12px;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .title-section {
    margin-right: 0;
    width: 100%;
  }

  .title-input :deep(.el-input__inner) {
    font-size: 1.5rem;
    height: 48px;
  }

  h2.text-xl {
    font-size: 1.5rem;
  }

  .action-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-button {
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.9em;
    justify-content: center;
  }

  .action-button .el-icon {
    font-size: 14px;
  }

  .action-button span {
    display: none;
  }

  .jiwei-count {
    display: none;
  }

  .navigation-buttons {
    padding: 8px;
    gap: 12px;
  }

  .page-info {
    padding: 6px 12px;
    font-size: 0.9em;
  }
}

.editor-wrapper {
  flex: 1;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.preview-wrapper {
  flex: 1;
  min-height: 0;
  padding: 32px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .preview-wrapper {
    padding: 16px;
  }
}

.markdown-editor {
  height: 100%;
  flex: 1;
}

.markdown-preview {
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
}

:deep(.md-editor) {
  border: none;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.md-editor-toolbar) {
  border-bottom: 1px solid #ebeef5;
  padding: 8px 16px;
  flex-shrink: 0;
  overflow-x: auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  :deep(.md-editor-toolbar) {
    padding: 8px;
  }

  :deep(.md-editor-toolbar-item) {
    padding: 4px 6px;
  }
}

:deep(.md-editor-content) {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 768px) {
  :deep(.md-editor-content) {
    padding: 12px;
  }
}

:deep(.md-editor-input) {
  height: 100%;
  min-height: 500px;
}

@media (max-width: 768px) {
  :deep(.md-editor-input),
  :deep(.md-editor-preview) {
    min-height: 300px;
  }
}

:deep(.md-editor-preview) {
  height: 100%;
  min-height: 500px;
  overflow-y: auto;
}

:deep(.md-preview) {
  padding: 0;
}

:deep(.md-preview h1) { font-size: 1.8rem; }
:deep(.md-preview h2) { font-size: 1.5rem; }
:deep(.md-preview h3) { font-size: 1.3rem; }
:deep(.md-preview h4) { font-size: 1.2rem; }
:deep(.md-preview h5) { font-size: 1.1rem; }
:deep(.md-preview h6) { font-size: 1rem; }

@media (max-width: 768px) {
  :deep(.md-preview h1) { font-size: 1.5rem; }
  :deep(.md-preview h2) { font-size: 1.3rem; }
  :deep(.md-preview h3) { font-size: 1.2rem; }
  :deep(.md-preview h4) { font-size: 1.1rem; }
  :deep(.md-preview h5) { font-size: 1rem; }
  :deep(.md-preview h6) { font-size: 0.9rem; }
}

:deep(.md-preview p) {
  margin-bottom: 16px;
  line-height: 1.8;
}

:deep(.md-preview code) {
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
}

:deep(.md-preview pre) {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  overflow-x: auto;
}

:deep(.md-preview blockquote) {
  border-left: 4px solid #409EFF;
  padding: 8px 16px;
  margin: 16px 0;
  background-color: #f5f7fa;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 768px) {
  :deep(.md-preview pre),
  :deep(.md-preview blockquote) {
    padding: 12px;
    margin: 12px 0;
  }
}

.jiwei-button {
  background-color: #67c23a;
  border-color: #67c23a;
}

.jiwei-button:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.jiwei-count {
  margin-left: 2px;
  font-size: 0.9em;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .jiwei-count {
    display: none;
  }
}

.edit-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.input-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.title-input,
.category-select {
  width: 100%;
}

.title-input :deep(.el-input__wrapper),
.category-select :deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
}

.title-input :deep(.el-input__inner),
.category-select :deep(.el-input__inner) {
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
  color: #1a1a1a;
}

.title-input :deep(.el-input__wrapper.is-focus),
.category-select :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 1px #409EFF !important;
}

.title-input :deep(.el-input__inner)::placeholder {
  color: #909399;
  opacity: 0.7;
}

.edit-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 768px) {
  .edit-header {
    flex-direction: column;
    gap: 16px;
  }

  .input-group {
    width: 100%;
  }
}

.custom-tree-select-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.node-title {
  font-weight: 500;
  color: #1a1a1a;
}

.node-path {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

:deep(.el-tree-select .el-input__wrapper) {
  padding: 0 8px;
}

:deep(.el-tree-select .el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-tree-select-dropdown__item) {
  padding: 0 12px;
}

:deep(.el-tree-select-dropdown__item.selected) {
  background-color: #f5f7fa;
}

:deep(.el-tree-select-dropdown__item:hover) {
  background-color: #f5f7fa;
}

@media (max-width: 768px) {
  .custom-tree-select-node {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .node-path {
    margin-left: 0;
  }
}

/* 确保树形选择器的下拉图标垂直居中 */
.category-select :deep(.el-input__suffix) {
  height: 32px;
  line-height: 32px;
}

.category-select :deep(.el-input__suffix-inner) {
  height: 32px;
  line-height: 32px;
}

/* 确保树形选择器的下拉图标大小合适 */
.category-select :deep(.el-select__caret) {
  font-size: 14px;
  line-height: 32px;
}
</style> 